<!--
 * @Description: 
 * @Date: 2021-11-02 11:21:30
 * @LastEditTime: 2021-11-02 15:04:52
-->
<template>
  <router-view v-slot="{ Component }">
    <transition :name="transitionName">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
  <TarBar></TarBar>
</template>
<script>
import TarBar from "./components/TarBar/tarbar.vue";
import { ref } from "vue";
export default {
  setup() {
    const transitionName = ref("");
    return {
      transitionName,
    };
  },
  watch: {
    $route(to, from) {
      const fromIndex = from.meta.index;
      const toIndex = to.meta.index;
      if (toIndex > fromIndex) {
        this.transitionName = "slide-right";
      } else if (toIndex < fromIndex) {
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "";
      }
    },
  },
  components: {
    TarBar,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>
